<template>
  <PageLayout 
    title="个人资料" 
    description="查看和管理您的个人信息"
  >
    <UserInfo :user-id="userId" />
    <div class="mt-8">
      <UserContent :user-id="userId" />
    </div>
    <div class="mt-8 flex justify-end">
      <UserSettingsButton />
    </div>
  </PageLayout>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import PageLayout from '../components/layout/PageLayout.vue'
import UserInfo from '../components/user/UserInfo.vue'
import UserContent from '../components/user/UserContent.vue'
import UserSettingsButton from '../components/user/UserSettingsButton.vue'

const route = useRoute()
const userId = computed(() => route.params.id as string)
</script>